import { Link, Route, Switch, NavLink } from 'react-router-dom'
import { BrowserRouter } from 'react-router-dom'

function About(router) {
  return <div>about</div>
}

function Home() {
  return <div>home</div>
}

function NotFound() {
  return (
    <div>
      <h2>not found</h2>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        {/* 内联样式 */}
        <div>
          <NavLink activeStyle={{color: 'blue'}} to="/home">Home</NavLink>
          <NavLink activeStyle={{color: 'red'}} to="/about">about</NavLink>
        </div>
        {/* 一个switch为一组，只会展示第一个被匹配的组件 */}
        <Switch>
          <Route component={Home} path="/home"></Route>
          <Route component={About} path="/about"></Route>
          <Route component={NotFound}></Route>
        </Switch>
        
      </BrowserRouter>
    </div>
  )
}

export default App
